<script lang="ts" setup>
import { useFileTransStore } from '@/stores/fileTransStore'; // 引入 Pinia store
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';

// 定义接口以增强类型安全
interface Chapter {
  Start: number;
  Headline?: string;
  Summary?: string;
}

// 获取 fileTransStore
const fileTransStore = useFileTransStore();
const { autoChapters } = storeToRefs(fileTransStore);

// 用于显示章节数据的响应式数据
const chapterOverviewData = ref<{
  time: string;
  title: string;
  description: string;
}[]>([]);

// 从 autoChapters 中提取并映射为适合 List 组件的数据结构
const updateChapterOverviewData = () => {
  if (autoChapters.value && autoChapters.value.length > 0) {
    chapterOverviewData.value = autoChapters.value.map((chapter: Chapter) => ({
      time: `${Math.floor(chapter.Start / 60000)}:${((chapter.Start % 60000) / 1000)
        .toFixed(0)
        .padStart(2, '0')}`,
      title: chapter.Headline || '无标题',
      description: chapter.Summary || '暂无摘要',
    }));
  }
  else {
    chapterOverviewData.value = [];
  }
};

// 监听 autoChapters 的变化
watch(autoChapters, () => {
  updateChapterOverviewData(); // 更新 chapterOverviewData 的内容
}, { immediate: true });

// 初始化时获取数据
onMounted(() => {
  updateChapterOverviewData(); // 确保组件挂载时初次获取数据
});
</script>

<template>
  <div class="chapterOverview">
    <!-- 使用 a-list 渲染章节数据 -->
    <a-list v-if="chapterOverviewData.length > 0" item-layout="vertical" :data-source="chapterOverviewData">
      <template #renderItem="{ item }">
        <a-list-item class="listItem">
          <div class="timeAxis">
            <span class="time">{{ item.time }}</span>
            <span class="dot" />
          </div>
          <div class="cardContainer">
            <h3 class="cardTitle">
              {{ item.title }}
            </h3>
            <p class="cardDescription">
              {{ item.description }}
            </p>
          </div>
        </a-list-item>
      </template>
    </a-list>

    <!-- 提示没有数据的状态 -->
    <p v-else>
      没有章节数据可显示。
    </p>
  </div>
</template>

<style scoped>
.chapterOverview {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
}

.listItem {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.timeAxis {
  position: relative;
  width: 0px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -40px;
}

.timeAxis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 400%;
  border-left: 1px dashed #d9d9d9;
  transform: translateX(-50%);
  z-index: 0;
}

.timeAxis::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 100%;
  border-left: 1px dashed #d9d9d9;
  transform: translateX(-50%);
  z-index: 0;
}

.time {
  color: #888;
  z-index: 1;
  background-color: #fff;
  padding: 2px 6px;
  margin-bottom: 4px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #003399;
  border-radius: 50%;
  z-index: 1;
  margin-top: 6px;
}

.cardContainer {
  margin-left: 50px;
  background-color: #f6f5fd;
  border-radius: 8px;
  padding: 20px;
  margin-top: -50px;
}

.cardTitle {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
}

.cardDescription {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
}
</style>
